<template>
  <div class="container">
    <!-- 左侧树形结构展示 -->
    <div class="sidebar">
      <a-card title="生态服务项目列表" bordered="{false}" class="sidebar-card">
        <a-tree
          :treeData="treeData"
          @select="onSelectNode"
          defaultExpandAll
          :fieldNames="{ title: 'name', key: 'id', children: 'children' }"
          class="tree"
        />
      </a-card>
    </div>

    <!-- 右侧详细信息与评估项填写 -->
    <div class="content">
      <a-card
        style="min-height: 880px"
        v-if="selectedProject"
        title="项目详细信息"
        bordered="{false}"
      >
        <div v-if="selectedProject">
          <p><strong>项目名称:</strong> {{ selectedProject.name }}</p>
          <p><strong>项目类型:</strong> {{ selectedProject.type }}</p>
          <p><strong>数据:</strong></p>
          <ul>
            <li v-for="(data, key) in selectedProject.data" :key="key">
              {{ key }}: {{ data }}
            </li>
          </ul>
          <a-button type="primary" @click="showEvaluation = true" class="evaluate-button"
            >评估</a-button
          >

          <!-- 评估项填写 -->
          <a-card
            v-if="showEvaluation"
            title="评估项填写"
            bordered="{false}"
            class="evaluation-card"
          >
            <a-form layout="vertical">
              <h3>经济价值</h3>
              <a-form-item label="发电量 (单位: kWh)">
                <a-input
                  v-model="evaluationData.economic.powerGeneration"
                  placeholder="请输入发电量"
                />
              </a-form-item>
              <a-form-item label="市场价格 (单位: 元/kWh)">
                <a-input
                  v-model="evaluationData.economic.marketPrice"
                  placeholder="请输入市场价格"
                />
              </a-form-item>
              <a-form-item label="经济价值">
                <p>{{ calculateEconomicValue() }} 元</p>
              </a-form-item>

              <h3>环境价值</h3>
              <a-form-item label="减少的CO2排放量 (单位: 吨)">
                <a-input
                  v-model="evaluationData.environment.co2Reduction"
                  placeholder="请输入减少的CO2排放量"
                />
              </a-form-item>
              <a-form-item label="CO2市场价值 (单位: 元/吨)">
                <a-input
                  v-model="evaluationData.environment.co2Price"
                  placeholder="请输入CO2市场价值"
                />
              </a-form-item>
              <a-form-item label="环境价值">
                <p>{{ calculateEnvironmentValue() }} 元</p>
              </a-form-item>

              <h3>社会价值</h3>
              <a-form-item label="提供的就业机会 (单位: 人)">
                <a-input
                  v-model="evaluationData.social.jobsCreated"
                  placeholder="请输入就业机会数量"
                />
              </a-form-item>
              <a-form-item label="每个就业机会的社会价值 (单位: 元/人)">
                <a-input
                  v-model="evaluationData.social.jobValue"
                  placeholder="请输入每个就业机会的社会价值"
                />
              </a-form-item>
              <a-form-item label="社会价值">
                <p>{{ calculateSocialValue() }} 元</p>
              </a-form-item>

              <a-button type="primary" @click="saveEvaluation">保存评估结果</a-button>
            </a-form>
          </a-card>
        </div>
      </a-card>

      <a-card v-else title="请选择一个项目" bordered="{false}" class="empty-card">
        <p>请选择一个项目查看详细信息</p>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 树形结构数据
const treeData = ref([
  {
    id: 1,
    name: "物质供给",
    children: [
      {
        id: 2,
        name: "绿色电力",
        type: "物质供给",
        data: { "发电量 (kWh)": 500000, "市场价格 (元/kWh)": 0.5 },
      },
      {
        id: 3,
        name: "农产品",
        type: "物质供给",
        data: { "产量 (吨)": 100, "市场价格 (元/吨)": 1000 },
      },
    ],
  },
  {
    id: 4,
    name: "文化服务",
    children: [
      {
        id: 5,
        name: "自然景区",
        type: "文化服务",
        data: { 游客数量: 200000, "门票价格 (元)": 50 },
      },
      {
        id: 6,
        name: "生态旅游",
        type: "文化服务",
        data: { 游客数量: 100000, "门票价格 (元)": 100 },
      },
    ],
  },
  {
    id: 7,
    name: "调节服务",
    children: [
      {
        id: 8,
        name: "水质调节",
        type: "调节服务",
        data: { "水源涵养量 (立方米)": 200000, "替代成本 (元)": 1000000 },
      },
      {
        id: 9,
        name: "空气调节",
        type: "调节服务",
        data: { "减少CO2排放量 (吨)": 300, "CO2市场价格 (元/吨)": 50 },
      },
      {
        id: 10,
        name: "气候调节",
        type: "调节服务",
        data: { "碳吸收量 (吨)": 1000, "碳价格 (元/吨)": 200 },
      },
    ],
  },
]);

// 当前选中的项目
const selectedProject = ref(null);

// 显示评估部分
const showEvaluation = ref(false);

// 评估数据
const evaluationData = ref({
  economic: {
    powerGeneration: null,
    marketPrice: null,
  },
  environment: {
    co2Reduction: null,
    co2Price: null,
  },
  social: {
    jobsCreated: null,
    jobValue: null,
  },
});

// 选中树形节点后，展示详细信息
const onSelectNode = (selectedKeys, { node }) => {
  selectedProject.value = node;
  showEvaluation.value = false; // 重置评估项的显示
};

// 计算经济价值
const calculateEconomicValue = () => {
  const { powerGeneration, marketPrice } = evaluationData.value.economic;
  if (powerGeneration && marketPrice) {
    return powerGeneration * marketPrice;
  }
  return 0;
};

// 计算环境价值
const calculateEnvironmentValue = () => {
  const { co2Reduction, co2Price } = evaluationData.value.environment;
  if (co2Reduction && co2Price) {
    return co2Reduction * co2Price;
  }
  return 0;
};

// 计算社会价值
const calculateSocialValue = () => {
  const { jobsCreated, jobValue } = evaluationData.value.social;
  if (jobsCreated && jobValue) {
    return jobsCreated * jobValue;
  }
  return 0;
};

// 保存评估结果
const saveEvaluation = () => {
  const economicValue = calculateEconomicValue();
  const environmentValue = calculateEnvironmentValue();
  const socialValue = calculateSocialValue();
  console.log("评估结果已保存", { economicValue, environmentValue, socialValue });
  // 可以在此处将评估结果保存到服务器或本地
};
</script>

<style scoped>
.container {
  display: flex;
}

.sidebar {
  width: 300px;
  background: white;
  display: table-cell;
  min-height: 880px;
}

.sidebar-card {
  height: 100%;
}

.tree {
  background: white;
  padding: 12px;
}

.content {
  flex-grow: 1;
  padding-left: 10px;
  background: #f0f2f5;
  display: table-cell;
  min-height: 880px;
}

.evaluation-card {
  margin-top: 20px;
}

.empty-card {
  text-align: center;
  min-height: 880px;
}

.evaluate-button {
  margin-top: 16px;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

a-form-item {
  margin-bottom: 16px;
}

a-button {
  margin-top: 16px;
}
</style>
